<template>
  <div class="problem-content">
    <el-descriptions :column="1" border class="test-description">
      <el-descriptions-item
        label="建议主要研究内容"
        label-align="right"
        label-class-name="descript-label-width"
      >
        <!-- <el-input disabled type="textarea" :rows="10" /> -->
        {{ detailsInfo.mainResearchContent || '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        label="建议主要经济指标"
        label-align="right"
        label-class-name="descript-label-width"
      >
        <!-- <el-input v-model="test" disabled type="textarea" :rows="10" /> -->
        {{ detailsInfo.mainTechnoeconomicIndicators || '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        label="预期成果"
        label-align="right"
        label-class-name="descript-label-width"
      >
        <!-- <el-input disabled type="textarea" :rows="10" /> -->
        {{ detailsInfo.expectedOutcome || '-' }}
      </el-descriptions-item>
      <el-descriptions-item
        label="现场问题描述"
        label-align="right"
        label-class-name="descript-label-width"
      >
        <!-- <el-input disabled type="textarea" :rows="10" /> -->
        {{ detailsInfo.problemDescription || '-' }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script lang="ts" setup>
  import { detailsInfoProps } from '../../interface'

  defineProps<{
    detailsInfo: detailsInfoProps
  }>()
</script>

<style lang="scss" scoped>
  .problem-content {
    :deep(.test-description) {
      width: 100%;
      // margin-bottom: 20px;
      .el-descriptions__title {
        width: 100%;
        height: 28px;
        padding-left: 12px;
        font-size: 14px;
        font-weight: 500;
        line-height: 28px;
        color: #606266;
        background: #f7f8f9;
        border-left: 5px solid #1890ff;
        border-radius: 2px;
      }
      .descript-label-width {
        width: 140px;
      }
    }
  }
</style>
